view {
  box-sizing: border-box;
}
page {
  height: 100%;
  background: #f2f2f2;
}

.clearfix{clear: both;}
.fl{float: left;}
.fr{float: right;}

input.input_placeholder{color: #eee;}

.container {
  min-height: 100%;
  position: relative;
  background: #ffffff;
}
.swiper-top .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
}
.swiper-top .wx-swiper-dot{
    width:40rpx;
    display: inline-flex;
    height: 10rpx;
    margin-left: 20rpx;
    justify-content:space-between;
}
.swiper-top .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(255,255,255,0.8);
    border-radius: 8rpx
}
.swiper-top .wx-swiper-dot-active::before{
    background:rgba(244,0,0,0.8);   
}

//头部
.topbar0{width: 100%; height: 90rpx; position:fixed; top:0rpx; z-index:10; padding:10rpx 10rpx; background-color:rgba(48, 48, 48, 0); transition: background-color 0.5s ease-out,color 0.3s ease-in;}
.topbar0 .baricon{width:70rpx; height:70rpx; line-height: 70rpx;  text-align: center; display: block; background: rgba(48,48,48,0.7); color: #fff; font-size:40rpx; border-radius: 100%; margin:0 20rpx;}
.topbar0.active{background-color:rgba(48, 48, 48, 1); transition: background-color 0.5s ease-in,color 0.3s ease-out;}
.topbar{width: 100%; position:absolute; top:0rpx; z-index:10; padding:10rpx 10rpx; background-color:rgba(48, 48, 48, 0); transition: background-color 0.5s ease-out,color 0.3s ease-in; }
.topbar .baricon{width:70rpx; height:70rpx; line-height: 70rpx;  text-align: center; display: block; background: rgba(48,48,48,0.7); color: #fff; font-size:40rpx; border-radius: 100%; margin:0 20rpx;}
.topbar0 button.baricon{padding: 0;}

//下拉图标
.baricon0{width:79rpx; height:85rpx; float: left; display:flex; align-items: flex-end;  overflow: hidden; margin:-10rpx 20rpx; }
.baricon0 image{width: 100%; }
.baricon0_hover{width:79rpx; height:110rpx; float: left; display:flex; align-items: flex-end;  overflow: hidden; margin:-10rpx 20rpx;}
.baricon0_hover image{width: 100%; }

//下拉菜单
.topbar_dorpmenu{
    position: absolute;
    right: 25rpx;
    top: 90rpx;
    width: 270rpx;
    z-index: 100;
    background: #fff;
    border-radius: 10rpx;
    box-shadow:3rpx 3rpx 7rpx #666;
}
.topbar_dorpmenu::after{
    content: "";
    position: absolute;
    top: -18rpx;
    right: 20rpx;
    width: 0; 
    height: 0; 
    border-left: 20rpx solid transparent; 
    border-right: 20rpx solid transparent; 
    border-bottom: 20rpx solid #fff;
}
.topbar_dorpmenu navigator{
    display: block;
    height:80rpx;
    line-height:80rpx;
    overflow: hidden;
    padding:0 20rpx;
    color: #303030;
    border-bottom: 1px #eeeeee solid;
}
.topbar_dorpmenu button{
    border: 0;
    border-radius: 0;
    height:80rpx;
    line-height:80rpx;
    text-align: left;
    padding:0 20rpx;
    color: #303030;
    border-bottom: 1px #eeeeee solid;
}
.topbar_dorpmenu navigator:last-child{border: 0;}
.topbar_dorpmenu button:last-child{border: 0;}
.topbar_dorpmenu .iconfont{font-size: 35rpx; margin-right:10rpx;float: left;}
.topbar_dorpmenu .txt{font-size:30rpx;}
.topbar_dorpmenu .zan-badge{float: right; margin:45rpx 30rpx 0 0;}

.footbar{width: 101%; height: 100rpx; overflow: hidden; position:fixed; bottom:0rpx; z-index:10; background:#fff; display: flex; flex-direction: row; flex-wrap: wrap; }
.footbar navigator{height: 100rpx; line-height: 100rpx; text-align: center;}
.footbar button{height: 100rpx; line-height: 100rpx; text-align: center; padding: 0; border: 0; border-radius: 0;}

.footbar .fbtn0{width: 15%; height:100rpx; line-height:40rpx; background: #fff;  overflow: hidden; position: relative; border-top:2rpx #d3dfe5 solid; border-left:2rpx #d3dfe5 solid; margin-left: -2rpx; }
.footbar .fbtn0 text{font-size: 30rpx; display: block; color: #303030;}
.footbar .fbtn0 .iconfont{display: block; font-size: 45rpx; line-height:45rpx; margin:8rpx auto 0 auto; border: 0;}

.footbar .fbtn0.active text{color:#ac1f28;}
.footbar .fbtn1{width: 35%; background: #1b1e3d; color: #fff; font-size: 35rpx; line-height: 100rpx; border-radius:0; border: 0; margin: 0;}
.footbar .fbtn2{width: 35%; background: #ac1f28; color: #fff; font-size: 35rpx; line-height: 100rpx;  border-radius: 0;}
.footbar .fbtn3{width: 65%; background: #ac1f28; color: #fff; font-size: 35rpx; line-height: 100rpx; border-radius: 0;}
.footbar .fbtn4{width: 100%; background: #ac1f28; color: #fff; font-size: 35rpx; line-height: 100rpx;  border-radius: 0;}
.footbar .ftxt{width: 65%;font-size: 35rpx; line-height: 100rpx; color: #303030; text-align: right;}
.footbar .ftxt .c_red{margin-right: 20rpx; font-weight: bold;}
.footbar .fbtn5{width: 95%; font-size: 35rpx; height: 90rpx; line-height:90rpx;}

.footbar1{width: 100%; height: 100rpx; overflow: hidden; position:fixed; bottom:0; z-index:10; border-top:2rpx #eeeeee solid; padding: 0 40rpx; background:#fcfcfc; }
.footbar1 .finput{width:73%; height: 80rpx; color:#303030;  font-size: 30rpx; border-bottom:2rpx #1b1e3d solid;}
.footbar1 .fbtn{width:25%; height:65rpx; line-height: 65rpx; background: #ac1f28; color: #fff; border-radius:40rpx; margin-top: 20rpx;}

.footbar2{width: 100%; height: 100rpx; overflow: hidden; position:fixed; bottom:0; z-index:10; border-top:2rpx #eeeeee solid; padding: 0 20rpx; background:#fcfcfc;
   display: flex; flex-direction: row; justify-content:center; }
.footbar2 .fbtn0{width: 10%; height:100rpx; line-height: 100rpx; overflow: hidden; border:0; padding: 0; margin: 0 1%;}
.footbar2 .fbtn0 text{ font-size: 60rpx;}
.footbar2 .finput{width:65%; height: 80rpx; line-height: 100rpx; color:#303030; padding: 0;  font-size: 30rpx; border-bottom:2rpx #1b1e3d solid;}
.footbar2 .fbtn{width:20%; height:65rpx; line-height: 65rpx; border-radius:40rpx;padding: 0; margin: 0; margin-top: 20rpx;}


.searchbar{width: 100%; height: 80rpx; overflow: hidden; padding: 0 10rpx 0 20rpx;}
.searchbar .search_input{width:85%; float: left; background: #f7f7f7; border-radius: 10rpx; height: 80rpx; line-height: 80rpx; overflow: hidden; position: relative; }
.searchbar .search_input .iconfont{position: absolute; top:0; color: #ababab; }
.searchbar .icon-search{left:20rpx; font-size: 40rpx;}
.searchbar .icon-guanbi{right:20rpx; font-size: 30rpx;}
.searchbar .search_input input{ height: 80rpx; line-height: 80rpx; font-size: 35rpx; color: #666; margin:0 50rpx 0 70rpx;}
.searchbar .search_btn{width:15%;text-align: center; display: block; height: 80rpx; line-height: 80rpx; overflow: hidden; font-size:35rpx; color: #ababab; margin-left: 10rpx; }


//uploadBox
.uploadBox{height: auto; overflow: hidden;}
.uploadBox .upload_btn{width:200rpx; height:200rpx; float: left; text-align: center; overflow: hidden; border:2rpx #cccccc dotted; margin:0 16rpx 16rpx 0; }
.uploadBox .upload_btn .iconfont{font-size:80rpx; line-height:80rpx; display: block; margin:20rpx auto 0 auto; color: #999;}
.uploadBox .upload_btn .txt{font-size: 25rpx; display: block; line-height:30rpx; color: #999;}
.uploadBox .upload_img{width:200rpx; height:200rpx; overflow:hidden; float: left; margin:0 16rpx 16rpx 0; position: relative;}
.uploadBox .upload_img text{position: absolute; right:5rpx; top:5rpx; font-size:40rpx; color: #fff;}
.uploadBox .upload_img image{width:100%;}

//zan-popup
.popup_close{position: absolute; right: 20rpx; top:20rpx; z-index: 10;}
.popup_close .iconfont{font-size: 45rpx; color: #999;}

.popup_preview .zan-popup__container{background:none;}
.popup_preview swiper{width:750rpx; height:100%;}
.popup_preview .item_pic{height: 100%; display:flex; align-items:center;}
.popup_preview .slide-image{width: 100%;}

//button
button.btn_red{background: #ac1f28; color: #fff;}
button.btn_bred{border:1px #ac1f28 solid; color: #ac1f28;}
button.btn_blue{background: #1b1e3d; color: #fff;}
button.btn_bblue{border:1px #1b1e3d solid; color: #1b1e3d;}
button.btn_gray{background: #1b1e3d; color: #fff;}
button.btn_bgray{border:1px #999999 solid; color: #303030;}
button.btn_black{background: #303030; color: #fff;}

//color
.c_gray{color: #999;}
.c_red{color: #ac1f28;}
.c_blue{color: #1b1e3d;}
//box_shadow
.box_shadow{border-radius: 10rpx; box-shadow: 2rpx 2rpx 5rpx #eeeeee;}

.countdown{display: inline-block;}


checkbox-group{width: 100%;}
/*  重写 checkbox 样式  */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
   border-radius: 50%;/* 圆角 */
   width: 40rpx; /* 背景的宽 */
   height: 40rpx; /* 背景的高 */
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    border-color: #ac1f28;
   background: #ac1f28;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
   height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#fff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
radio .wx-radio-input{
   border-radius: 50%;/* 圆角 */
   width: 40rpx;
   height: 40rpx;
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked{
   background:#ac1f28;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
   height: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#fff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

/*  goods_list  */
  .goods_list{height: auto; overflow: hidden; padding:20rpx; display: flex; flex-direction: row; flex-wrap: wrap;}
  .goods_list .goods-item{width: 46%; margin:20rpx 2% 30rpx 2%;}
  .goods_list .goods-item image{width: 100%; height: 330rpx; border-radius:20rpx;}
  .goods_list .goods-item .hprice{height: auto; overflow: hidden; margin:15rpx 0;}
  .goods_list .goods-item .hprice .oprice{
        font-size:27rpx;
        color: #999;
  }
  .goods_list .goods-item .hprice .cprice{
        font-size: 35rpx;
        font-weight: bold;
        color: #000;
        margin-right: 10rpx;
  }
 .goods_list .goods-item .txt{
        width: 100%;
        display: block;
        height: 40rpx;
        line-height: 40rpx;
        overflow: hidden;
        font-size:30rpx;
        color: #666;
        text-overflow: ellipsis;
        white-space: nowrap;
 }

/* order_item */
.order_item{height: auto; overflow: hidden; margin:20rpx 20rpx; background: #fff;}
.order_item .box_tips{padding:0 30rpx 20rpx 30rpx; display: block; font-size:27rpx; color: #999;}
.order_item .box_tips .countdown{display: inline-block; font-size:27rpx; color: #999;}
.order_item .box_bt{ height:90rpx; line-height:90rpx; border-top:2rpx #eeeeee solid; padding: 0 30rpx;}
.order_item .box_bt button{float: right; margin:15rpx 0 0 10rpx; border-radius:70rpx;}
.order_item .box_bt .fl{font-size: 30rpx; color: #999;}

/* order_goods */
.order_goods:first-child{margin-top:20rpx;}
.order_goods{ height: auto; overflow: hidden; padding:10rpx 30rpx 20rpx 30rpx; text-align: left; }
.order_goods image{width: 30%; float: left; display: block; border-radius: 10rpx; margin-right: 20rpx;}
.order_goods .ct{ display: block; height: auto; overflow: hidden; }
.order_goods .title{display: block; height: 40rpx; line-height: 40rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 30rpx; color: #303030;}
.order_goods .title1{display: block; font-size: 30rpx; color: #303030;}
.order_goods .price{margin: 5rpx 0;}
.order_goods .cprice{font-size:30rpx; color: #303030; margin-right: 10rpx;}
.order_goods .oprice{font-size:28rpx; margin-right: 10rpx;}
.order_goods .num{font-size:30rpx;color: #ac1f28; }
.order_goods .spec{font-size:30rpx;color: #999;}
.order_goods .quan{width: 40rpx; float: inherit; margin-top: 5rpx;}
